<template>
    <div class="material-review-examination"  :key="materialReviewExaminationKey">
        <div class="material-review-tabs" v-if="!currentRow.isTopTabs">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                <a-tab-pane key="材料审查" tab="材料审查"></a-tab-pane>
                <a-tab-pane key="申请信息" tab="事项信息"></a-tab-pane>
                <a-tab-pane key="环节流转记录" tab="流转记录"></a-tab-pane>
            </a-tabs>
        </div>
        <div class="material-review-content" 
        :style="{height: currentRow.isTopTabs?'calc(100vh - '+(151 + currentRow.reserveBottom)+'px)':'calc(100vh - '+145+'px)',boxShadow:currentRow.isTopTabs?'': '0px 0px 12px 0px #5ca3e5'}">
            <div v-show="activeKey == '材料审查'">
                <a-spin size="large" :spinning="spinning" :key="spinningKey">
                    <div class="review-table" :key="directoryKey" v-if="directoryList.length">
                        <!-- <div v-if="!currentRow.isDisabled" style="width: 100%;display: flex;justify-content: flex-end;margin: 10px 0;font-weight: 600;"> -->
                            <!-- <div style="display: flex;align-items: center;">
                                <span>设置全部审核状态：</span>
                                <a-radio-group v-model="auditStatus" @change="onChangeExamine" :key="allStatusKey">
                                    <a-radio value="已审核">已审核</a-radio>
                                    <a-radio value="未审核">未审核</a-radio>
                                </a-radio-group>
                            </div>
                            <div style="display: flex;align-items: center;margin-left: 30px;">
                                <span>设置全部技术审评是否可见：</span>
                                <a-radio-group v-model="visibleState" @change="onChangeVisible" :key="allStatusKey">
                                    <a-radio value="允许">允许</a-radio>
                                    <a-radio value="不允许">不允许</a-radio>
                                </a-radio-group>
                            </div> -->
                            <!-- <div style="display: flex;align-items: center;margin-left: 30px;">
                                <span>设置全部审查意见：</span>
                                <a-radio-group v-model="allOpinion" @change="onChangeOpinionVisible" :key="allStatusKey">
                                    <a-radio value="无意见">无意见</a-radio>
                                    <a-radio value="有意见">有意见</a-radio>
                                </a-radio-group>
                            </div>
                        </div> -->
                        <table border bordercolor="#d9d9d9" style="width: 100%; " >
                            <tr>
                                <th>材料目录</th>
                                <th>接收材料</th>
                                <th style="min-width:150px;" v-if="isFcljsqh">补正材料</th>
                                <th>技术审查情况</th>
                                
                                <!-- <th>补充材料审查意见</th> -->
                                <!-- <th v-if="!currentRow.isDisabled">操作</th> -->
                            </tr>
                            <tr v-for="(item,index) in directoryList" :key="index" class="file-list-v-examination">
                                <td style="width: 30%;text-align:center;">{{ item.ml.fmlmc }}</td>
                                <td >
                                    <div class="file-for-box">
                                        <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '0'">
                                            <div class="file-icon-box">
                                                <!-- <div class="left-box"></div> -->
                                                <!-- <a-icon class="file-icon-v" type="file-pdf" /> -->
                                                <div class="right-box">
                                                    <span
                                                    style="
                                                    padding: 0 3px;
                                                    color: #fff;
                                                    background: #18d118;
                                                    border-radius: 3px;
                                                    "
                                                    :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                    
                                                </div>
                                            </div>
                                            <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                            <a-icon style="padding: 0 3px;" class="eye-icon-v" type="eye" @click="fetchAndAddWatermark(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                        </div>
                                    </div>
                                </td>
                                <td v-if="isFcljsqh">
                                    <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '1'">
                                        <div class="file-icon-box">
                                            <!-- <div class="left-box"></div> -->
                                            <!-- <a-icon class="file-icon-v" type="file-pdf" /> -->
                                            <div class="right-box">
                                                <span
                                                style="
                                                padding: 0 3px;
                                                color: #fff;
                                                background: #18d118;
                                                border-radius: 3px;
                                                "
                                                :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                
                                            </div>
                                        </div>
                                        <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                        <a-icon class="eye-icon-v" type="eye" @click="fetchAndAddWatermark(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                    </div>
                                </td>
                                <td style="width: 300px;text-align: center;">
                                    <div v-if="!currentRow.isDisabled">
                                        <div style="padding: 3px 0;" v-if="currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'">
                                            <a-radio-group v-model="item.ml.fywscyj" @change="singleOpinionChange($event,'fywscyj',item)" >
                                                <a-radio value="无意见">无意见</a-radio>
                                                <a-radio value="有意见">有意见</a-radio>
                                            </a-radio-group>
                                        </div>
                                        <div v-if="!item.ml.fywscyj">
                                            <span>上一次技术审查情况：{{ item.ml.fbcscyj }}</span>
                                        </div>
                                        <div v-if="item.ml.fywscyj && (currentRow.fhjmc == '材料审查复核' || currentRow.fhjmc == '方案制定')">
                                            {{ item.ml.fywscyj }}
                                        </div>
                                        <handlingOpinionsVisual
                                        v-if="item.ml.fywscyj == '有意见' && currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'"
                                        :key="handlingOpinionsVisualKey"
                                        :parameterData="{opinion:item.ml.fscyj,valueData:{id:item.ml.id,valueKey:'fscyj'},opinionType:item.ml.fmlmc}" 
                                        @getInputOpinion="getInputOpinion" />
                                    </div>
                                    <span v-else>{{ item.ml.fscyj }}</span>
                                </td>
                                
                                <!-- <td style="width: 300px;text-align: center;">
                                    <div v-if="!currentRow.isDisabled">
                                        <div style="padding: 3px 0;">
                                            <a-radio-group v-model="item.ml.fywbcscyj" @change="singleOpinionChange($event,'fywbcscyj',item)" >
                                                <a-radio value="无意见">无意见</a-radio>
                                                <a-radio value="有意见">有意见</a-radio>
                                            </a-radio-group>
                                        </div>
                                        <handlingOpinionsVisual
                                        v-if="item.ml.fywbcscyj == '有意见'"
                                        :key="handlingOpinionsVisualKey"
                                        :parameterData="{opinion:item.ml.fbcscyj,valueData:{id:item.ml.id,valueKey:'fbcscyj'},opinionType:item.ml.fmlmc}" 
                                        @getInputOpinion="getInputOpinion" />
                                    </div>
                                    <span v-else>{{ item.ml.fbcscyj }}</span>
                                </td> -->
                                <!-- <td style="width: 230px;" v-if="!currentRow.isDisabled">
                                    <div style="display: flex;align-items: center;">
                                        <span style="width: 126px;text-align: right;">审核状态：</span>
                                        <a-radio-group v-model="item.ml.fsczt" @change="$event=>{onChangeRowExamine($event,item)}">
                                            <a-radio value="已审核">已审核</a-radio>
                                            <br/>
                                            <a-radio value="未审核">未审核</a-radio>
                                        </a-radio-group>
                                    </div>
                                    <div style="display: flex;align-items: center;margin-top: 20px;">
                                        <span>技术审评是否可见：</span>
                                        <a-radio-group v-model="item.ml.fkckzt" @change="$event=>{onChangeRowVisible($event,item)}">
                                            <a-radio value="允许">允许</a-radio>
                                            <br/>
                                            <a-radio value="不允许">不允许</a-radio>
                                        </a-radio-group>
                                    </div>
                                </td> -->
                            </tr>
                        </table>
                    </div>
                    <div v-if="!spinning && !directoryList.length" style="display: flex;justify-content: center;margin: 20px 0;">
                        <a-empty />
                    </div>
                </a-spin>
            </div>
            <div v-show="activeKey == '申请信息'  || activeKey == '环节流转记录'" style="height: 100%;overflow: hidden;">
                <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                    <eventSet
                        :key="eventSetKey" 
                        ref="examinationEventSetRef" 
                        @updatedSuccess="eventupdatedSuccess"
                    />
                </a-spin>
            </div>
        </div>
    </div>
</template>
<script>
import { 
    spcyqueryQyWjclml,
    spcyupdateMl,
    spcyoneKeyUpdateClmlBkck,
    spcyoneKeyUpdateClmlKck,
    spcyoneKeyUpdateClmlWsc,
    spcyoneKeyUpdateClmlYsc,
    spcydownloadQysqclFile,
    spcygetSummaryOpinionInScyj,
    spcyoneTouchYesScyj,
    spcyoneTouchNoScyj,
    spcydownloadQysqclById,
 } from './service/index'
 import YchConstant from "@/api/YchConstant";
 import blobType from '@/common/blobType'
 import eventSet from '../taskAcceptance/eventSet.vue'
import CommpStep from '../../../../../components/commp-step/commpStep.vue';
import moment from 'moment'
import store from '@/store'
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'
export default {
    components:{
    eventSet,
    CommpStep
},
    props:{

    },
    data(){
        return{
            modalSpinningPrice:true,
            activeKey:'',
            directoryList:[],
            currentRow:{},
            directoryKey:null,
            auditStatus:'',
            visibleState:'',
            allOpinion:'',
            handlingOpinionsVisualKey:null,
            eventSetKey:null,
            allStatusKey:null,
            materialReviewExaminationKey:null,
            spinning:false,
            spinningKey:null,
            isFcljsqh:false,
            realname:store.getters.userInfo.realname,//获取用户名
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log('我是材料审查',row)
            this.currentRow = row
            this.currentRow.reserveBottom = row.reserveBottom?row.reserveBottom:0
            this.spinning = true
            spcyqueryQyWjclml({sqsxid:row.sqsxid}).then(res=>{
                if(res.code == 200){
                    // this.$message.success(res.message)
                    //console.log(res.result)
                    this.directoryList = res.result
                    // 
                    res.result.forEach((item,index)=>{
                        if(item.wjList && item.wjList.length){
                            item.wjList.forEach(trem=>{
                                if(trem.fcljsqh == '1'){
                                    this.isFcljsqh = true
                                    return
                                }
                            })
                        }else{
                            this.isFcljsqh = false
                            return
                        }
                    })
                    let fscztArr = []
                    let fkckztArr = []
                    let fscyjArr = []
                    res.result.forEach(item => {
                        fscztArr.push(item.ml.fsczt)
                        fkckztArr.push(item.ml.fkckzt)
                        fscyjArr.push(item.ml.fscyj)
                    });
                    
                    if(fscztArr.indexOf('已审核') == -1){
                        this.auditStatus = '未审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fscztArr.indexOf('未审核') == -1) {
                        this.auditStatus = '已审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fkckztArr.indexOf('允许') == -1) {
                        this.visibleState = '不允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('不允许') == -1) {
                        this.visibleState = '允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('无意见') == -1 && fkckztArr.indexOf('有意见') !== -1) {
                        this.allOpinion = '有意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    if(fkckztArr.indexOf('有意见') == -1&& fkckztArr.indexOf('无意见') !== -1) {
                        this.allOpinion = '无意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    
                }else{
                    this.$message.warning(res.message)
                }
                this.spinning = false
            })
            if(!row.noFirstLoad){
                this.activeKey = row.isActiveKey?row.isActiveKey:'材料审查'
                if(!row.isRefresh){
                    this.directoryKey = Date.now()
                    this.handlingOpinionsVisualKey = Date.now()
                    this.allStatusKey = Date.now()
                    this.materialReviewExaminationKey = Date.now()
                }
                
            }
            
        },
        eventupdatedSuccess(){
            this.modalSpinningPrice = false
        },
        onChangeExamine(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '已审核'){
                spcyoneKeyUpdateClmlYsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '未审核'){
                spcyoneKeyUpdateClmlWsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }


        },
        onChangeVisible(val){
            //console.log(val)
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '允许'){
                spcyoneKeyUpdateClmlKck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '不允许'){
                spcyoneKeyUpdateClmlBkck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
            

        },
        onChangeOpinionVisible(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '有意见'){
                spcyoneTouchYesScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '无意见'){
                spcyoneTouchNoScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
        },
        onChangeRowExamine(val,item){
            spcyupdateMl({fsczt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        onChangeRowVisible(val,item){
            spcyupdateMl({fkckzt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        tabPaneChange(val){
            if(val == '申请信息'  || val == '环节流转记录'){
                // this.eventSetKey = Date.now()
                this.$refs.examinationEventSetRef.getDatas({...this.currentRow,tabPaneActiveKey:val,noFirstLoad:true,borderisFalse:true})
                // this.$refs.examinationEventSetRef.$refs.dealWithRef.tabPaneChange(val)
                this.modalSpinningPrice = true
            }
        },
        viewClick(trem){
            //console.log(trem)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+trem.id
            )
            this.getData({...this.currentRow,noFirstLoad:true})
        },
        async fetchAndAddWatermark(trem) {
            try {
                // 从接口获取PDF文件流
                if(!trem.id){
                    return
                }
                const data = await spcydownloadQysqclFile({id:trem.id})
                //console.log('我获取到了什么文件流？',data)
                const realnameDate = this.realname+moment().format('YYYY年MM月DD日')
                //console.log('水印文本',realnameDate)
                this.previewPdfConstructor({
                    blob: data,
                    docTitle: 'window.open docTitle',
                    isAddWatermark: true, // 是否需要添加水印
                    watermark: { // watermark必填 里面可以不填
                        type: 'canvas',
                        text: realnameDate
                    }
                })
            } catch (error) {
                //console.log('Error fetching or adding watermark:', error);
            }
        },
        previewPdfConstructor({ blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } }){
            const _self = this
            if(!blob) {
                return console.error('[PDF Blob Is a required parameter]')
            }
            if(!isAddWatermark) { // 不添加水印
                 _self.preRightView(blob, docTitle)
            } else {
                let bytes,imageType
                if(type == 'image') {
                    if(!image) {
                    return console.error('["image" Is a required parameter]')
                    }
                    bytes = image.bytes
                    imageType = image.imageType
                }
                const map = {
                    // 'text': _self.addTextWatermark.bind(_self),
                    // 'image': _self.addImageWatermark.bind(_self),
                    'canvas': _self.addCanvasWatermark.bind(_self)
                }
                const pdfDoc =  PDFDocument.load(blob)
                let params
                if(type == 'text') params = { blob, pdfDoc, text, docTitle }
                if(type == 'image') params = { blob, pdfDoc, bytes, imageType, docTitle }
                if(type == 'canvas') params = { blob, pdfDoc, text, docTitle }
                this.resultUrl = map[type](params)
            }
        },
        async addCanvasWatermark({ blob, pdfDoc1, text, docTitle }) {
            const pdfDoc =  await PDFDocument.load(blob)
            // 旋转角度大小
            const rotateAngle = Math.PI / 4;
        
            // labels是要显示的水印文字，垂直排列
            let labels = new Array();
            labels.push(text);
        
            const pages = pdfDoc.getPages()
        
            const size = pages[0].getSize()
        
            let pageWidth = size.width
            let pageHeight = size.height

            //console.log('画布的宽高，',size.width,'-',size.height)
            let canvas = document.createElement('canvas');
            let canvasWidth = canvas.width = pageWidth;
            let canvasHeight = canvas.height = pageHeight;
        
            const context = canvas.getContext('2d');
            context.font = "15px Arial";
        
            // 先平移到画布中心
            context.translate(pageWidth / 2, pageHeight / 2 - 250);
            // 在绕画布逆方向旋转30度
            context.rotate(-rotateAngle);
            // 在还原画布的坐标中心
            context.translate(-pageWidth / 2, -pageHeight / 2);
        
            // 获取文本的最大长度
            let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
        
            let lineHeight = 15, fontHeight = 12, positionY, i
            i = 0, positionY = 0
            while (positionY <= pageHeight) {
            positionY = positionY + lineHeight * 5
            i++
            }
            canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
            //console.log('给canvas加上画布向左偏移的最大距离',Math.sin(rotateAngle) * (positionY + i * fontHeight))
            canvasHeight = 2 * canvasHeight
            for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
            // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
            context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
            for (let positionX = 0; positionX < canvasWidth; positionX += 1.5 * textWidth) {
                let spacing = 0;
                labels.forEach(item => {
                context.fillText(item, positionX, positionY + spacing);        
                context.fillStyle = 'rgba(0, 0, 0, .2)'; // 字体颜色
                spacing = spacing + lineHeight;
                })
            }
            context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
            context.restore();
            i++
            }
            // 图片的base64编码路径
            let dataUrl = canvas.toDataURL('image/png');
            // 使用Xhr请求获取图片Blob
            let xhr = new XMLHttpRequest();
            xhr.open("get", dataUrl, true);
            xhr.responseType = "blob";
            xhr.onload = res => {
            const imgBlob = res.target.response
            // 获取Blob图片Buffer
            imgBlob.arrayBuffer().then(async buffer => {
                const pngImage = await pdfDoc.embedPng(buffer)
                for(let i = 0; i < pages.length; i++) {
                pages[i].drawImage(pngImage)
                }
                // 序列化为字节
                const pdfBytes = await pdfDoc.save()
                this.preView(pdfBytes, docTitle)
            })
            }
            xhr.send();
        },
        preView(stream, docTitle) {
            const URL = window.URL || window.webkitURL;
            const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' }))
            const wo = window.open(href)
            // 设置新打开的页签 document title
            let timer = setInterval(() => {
              if(wo.closed) {
                clearInterval(timer)
              } else {
                wo.document.title = docTitle
              }
            }, 500)
        },
        downloadClick(trem){
            //console.log(trem)
            let fwjlx = trem.fclmc.slice(trem.fclmc.lastIndexOf('.'))
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = trem.fclmc
            let param = { id:trem.id}
            
            spcydownloadQysqclById(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.getData({...this.currentRow,noFirstLoad:true})
                // }
            })
        },
        getInputOpinion(val,data){
            //console.log(data)
            let datas = {id:data.id}
            datas[data.valueKey] = val
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        singleOpinionChange(val,name,item){
            //console.log(item)
            let datas = {id:item.ml.id}
            datas[name] = val.target.value
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        }
    }
}
</script>
<style lang="less">
//1
.material-review-examination{
    width: 100%;
    
    padding: 2px 5px 5px 5px;
    overflow-y: auto;
    background-color: #fff;
    .material-review-tabs{
        // width: 100%;
        padding: 0 5px;
        background-color: #fff;
        position: relative;
        // top: 48px;
        top: 0;
        right: 0;
        // margin:0 10px;
        font-size: 20px !important;
        font-weight: 600 !important;
        .ant-tabs-bar{
            margin: 0;
        }
        .ant-tabs-nav .ant-tabs-tab{
            padding-top: 5px;
            padding-bottom: 5px;
            margin-right: 10px;
        }
        .ant-tabs-nav-container{
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
            padding-left: 10px;
        }
    }
    .ant-tabs-tab-active{
        font-size: 16px;
        font-weight: 600 !important;
    }
    .ant-tabs-tab{
        font-size: 16px;
        font-weight: 600 !important;
        line-height: 28px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .ant-tabs-tab-active{
        background-color: #5ca3e5 !important;
        color: #fff !important;
        border-color: #5ca3e5 !important;
        box-shadow: 0px 0px 12px 0px #5ca3e5;
    }
    .material-review-content{
        margin-top: 10px;
        height: calc(100vh - 210px);
        overflow-y: auto;
        
    }
}
//2
.material-review-examination{
    .review-table{
        padding-bottom: 3px;
        th{
            text-align: center;
            padding: 10px;
        }
        td{
            padding: 10px;
        }
    }
    .file-list-v-examination{
        .file-for-box{
            display: flex;
            flex-wrap: wrap;
        }
        .file-for-v{
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items:center;
            padding: 5px;
            margin: 5px;
            .file-icon-box{
                margin-right:5px;
                display: flex;
                justify-content: space-evenly;
                .file-icon-v{
                    font-size: 42px;
                    color: rgb(24, 144, 255);
                    padding: 7px;
                }
                // .left-box{
                //     width: 28px;
                // }
                .right-box{
                    display: flex;
                    // flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    padding-bottom: 2px;
                    width:35px;
                    
                }
                
            }
            .eye-icon-v{
                display:inline-block;
                padding-left: 30px;
                font-size: 18px;
                color: #1ab394;
            }
            .name-fclmc-text{
                // height: 60px;
                text-align: center;
                display:block;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                // display: flex;
                // flex-direction: column;
                // justify-content: center;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 14px;
            }
        }
        
    }
    
}
.processing-content-right-v{
    margin-left: 150px;
    background-color: #fff;
}
</style>